<template>
<div class="tab-nav-bar">
    <!-- 顶部导航栏 -->
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft">
        <template #title v-if="tabs.length > 0">
            <div class="tab-header">
                <div v-for="(tab, index) in tabs" :key="index" class="tab-item"
                    :class="{ active: activeTab === tab.value }" @click="switchTab(tab.value)">
                    {{ tab.label }}
                </div>
            </div>
        </template>
        <template #right v-if="showRight">
            <slot name="right">
                <van-icon name="search" size="18" @click="onRightClick" />
            </slot>
        </template>
    </van-nav-bar>
</div>
</template>

<script>
export default {
    name: 'TabNavBar',
    props: {
        // 导航栏标题，当没有tabs时显示
        title: {
            type: String,
            default: ''
        },
        // 选项卡数据
        tabs: {
            type: Array,
            default: () => []
        },
        // 当前激活的选项卡
        activeTab: {
            type: String,
            default: ''
        },
        // 是否显示右侧图标
        showRight: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        // 点击左侧返回按钮
        onClickLeft() {
            this.$emit('click-left')
        },
        // 点击右侧按钮
        onRightClick() {
            this.$emit('click-right')
        },
        // 切换选项卡
        switchTab(tab) {
            this.$emit('tab-change', tab)
        }
    }
}
</script>

<style scoped>
.tab-header {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.tab-item {
    padding: 0 6px;
    font-size: 14px;
    color: #666;
    position: relative;
}

.tab-item.active {
    color: #333;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background-color: #fe496d;
    border-radius: 2px;
}
</style>